<template>
    <view class="content">
        <image src="../../static/image/login_bg.jpg" class="login-bg"></image>
        <u-navbar title="登录" :background="background" title-size="32" :border-bottom="false" :immersive="true" :is-back="true" back-icon-color="#fff" title-color="#fff" title-width="300"></u-navbar>
        
        <view :style="{paddingTop: statusBar + 220 + 'px'}">
            <view class="wrapper">
                <view class="box">
                    <view class="title">用户名</view>
                    <input type="text" v-model="account" placeholder="请输入您的用户名" class="inp">
                    <view class="title">密码</view>
                    <input type="password" v-model="password" placeholder="请输入您的密码" class="inp">
                </view>
                <view class="btn" @click="login">登录</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                account:'',
                password:''
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
        },
        methods: {
            login(){
                if(!this.account){
                    this.$toast('请输入用户名');
                    return
                }
                
                if(!this.password){
                    this.$toast('请输入密码');
                    return
                }
                
                this.$ajax('user_login', {
                    account:this.account,
                    password:this.password
                }).then(ret => {
                    
                	if (ret.success == 1000) {
                        
                        console.log(ret);
                        if(ret.detail){
                            this.$setSync('identity',ret.detail.user_type);
                            this.$setSync('token',ret.detail.user_token);
							this.$setSync('userToken',ret.detail.user_token);
							this.$setSync('authority_car',ret.detail.authority_car);
                            
                            uni.$emit('LOGIN')
                            uni.switchTab({
                            	url: '/pages/tabbar/index'
                            });
                        }else{
                            this.$toast(ret.detail.msg);
                        }
                        
                        
                        
                	} else {
                		this.$toast(ret.data.msg);
                	}
                    
                });
            },
            
            
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
    .login-bg{
        width: 750rpx;
        height: 555rpx;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .wrapper{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
    .box{
        width: 100%;
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0 ;
        padding: 80rpx 50rpx;
        font-size: 30rpx;
        z-index: 999;
    }
    .title{
        font-weight: bold;
        padding-bottom: 15rpx;
        font-size: 36rpx;
    }
    .inp{
        width: 100%;
        height: 90rpx;
        border-bottom: 2rpx solid #efefef;
        margin-bottom: 50rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin: 0 50rpx;
        width: 616rpx;
    }
    
    

</style>
